/**
 * index.css
 * Paul Krishnamurthy 2016
 *
 * https://paulkr.com
 * paul@paulkr.com
 */

@import url(https://fonts.googleapis.com/css?family=Roboto:400,300);

html, body {
    width    : 100%;
    height   : 100%;
    margin   : 0;
    overflow : hidden;
}

.center {
    display      : block;
    margin-left  : auto;
    margin-right : auto;
}

#Wrapper {
    position    : relative;
    top         : 50%;
    transform   : translateY(-50%);
    font-family : "Roboto", sans-serif;
    text-align  : center;
}

#Box {
    max-width          : 500px;
    max-height         : 550px;
    background-color   : rgba(255, 255, 255, .7);
    margin-left        : auto;
    margin-right       : auto;
    padding            : 10px;
    left               : 0;
    right              : 0;
    border-radius      : 10px;
    -webkit-box-shadow : 0 8px 17px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
    -moz-box-shadow    : 0 8px 17px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
    box-shadow         : 0 8px 17px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
}

#Box h1 {
    font-weight : 300;
    font-size   : 40px;
}

#Box h1 span { font-weight : 400; }

#Box h2 {
    font-weight : 300;
    font-size   : 30px;
}

#Box .code-preview {
    width     : 330px;
    font-size : 15px;
}

#Box .effects {
    width         : 180px;
    height        : 50px;
    font-size     : 25px;
    outline       : none;
    margin        : 30px auto;
    opacity       : .7;
    border-radius : 5px;
}
